import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';

// JSX语法学习
let root = document.getElementById('root');
let h1 =<h1>this is the title 0f  h1<span><span>我是副标题</span></span></h1>

// 一、父传子、子传父
// props的传值可以是任意类型，父传给子，单项数据流，无法实现自传父
// HelloMessage.defaultProps={name:'zhangsan',msg:'helloMessage'};
// 注意：props可以传递函数，通过传递父元素的函数，就可以修改父元素的state，达到子传父的目的
class ParentCom extends React.Component{
  constructor(props){
    super(props);
    this.state={
      isActive:'true'
    }
    this.changeShow = this.changeShow.bind(this);
  };
  changeShow(){console.log(this.state.isActive)
    this.setState({
      isActive:!this.state.isActive
    });
  };
  render(){
    return (
      <div>
        <h5>父传子----通过自定义属性传递---ParentCom</h5>
        <button onClick={this.changeShow}>点击控制子元素显示</button>
        <Childcom isActive={this.state.isActive}/>
    </div>
    )
    
  }
};

class Childcom extends React.Component{
  constructor(props){
    super(props);
  };
  render(){
    let strClass = this.props.isActive ? "active1":"";
    return (
      <div className={strClass}>
        <h4>我是子组件---父传子控制显示隐藏</h4>
      </div>
    )
  }
}



// 二、react的子传父
class ParentCom2 extends React.Component{
  constructor(props){
    super(props);
    this.state={
      childData:null
    }
  };
  getChildData=(data)=>{
    this.setState({
      childData:data
    })
  };
  render(){
    return (
      <div>
        <h4>子传父获得的子数据是：{this.state.childData}</h4>
        <Childcom2 getChildData={this.getChildData}/>
      </div>
    )
  }
}

class Childcom2 extends React.Component{
  constructor(props){
    super(props);
    this.state={
      childData2:'我是来自子组件的数据'
    };
  };
  sendData=()=>{
    this.props.getChildData(this.state.childData2);
  };
  render(){
    return (
      <div>
        <button onClick={this.sendData}>点击子组件的该按钮将子组件的数据传给父组件</button>
      </div>
    )
  }
}

ReactDOM.render(
  <ParentCom2/>,
  root
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
